<template>
  <div>
     <div class="search_wrap">
        <el-form inline>
          <el-form-item label="用户名称">
            <el-input v-model="queryForm.userName"></el-input>
          </el-form-item>
             <el-form-item label="手机号码">
            <el-input v-model="queryForm.phonenumber"></el-input>
          </el-form-item>
             <el-form-item label="状态">
                <el-select style="width: 200px;" v-model="queryForm.status">
                  <el-option value="0" label="正常"></el-option>
                  <el-option value="1" label="停用"></el-option>
                </el-select> 
          </el-form-item>
          <el-form-item label="创建时间">
             <el-date-picker
              v-model="datetime"
              type="daterange"
              range-separator="To"
              value-format="YYYY-MM-DD"
              start-placeholder="Start date"
              end-placeholder="End date"
            />
          </el-form-item>
          <el-form-item>
               <el-button type="primary" @click="toSearch" :icon="Search">搜索</el-button>
                <el-button :icon="Refresh" >搜索</el-button>
          </el-form-item>
        
        </el-form>
     </div>
     <div class="btn_wrap">
       <el-button type="primary" @click="open" plain :icon="Plus">增加</el-button>
       <el-button type="success"  plain :icon="Edit">修改</el-button>
       <el-button   type="danger" plain :icon="Delete">删除</el-button>
       <el-button  @click="upFlag=true" plain :icon="Upload">导入</el-button>
       <el-button @click="toExport" type="warning" plain :icon="Download">导出</el-button>
     </div>
     <div class="table_wrap" style="margin-top: 20px;">
      <el-table border stripe :data="userList">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="用户编号" prop="userId"></el-table-column>
          <el-table-column label="用户名称" prop="userName"></el-table-column>
          <el-table-column label="用户昵称" prop="nickName"></el-table-column>
          <el-table-column label="部门" prop="dept.deptName"></el-table-column>
          <el-table-column label="手机号" prop="phonenumber"></el-table-column>
          <el-table-column label="状态">
            <template #default="{row}">
                    <el-switch v-model="row.status" active-value="0" 
                    inactive-value="1" />
            </template>
          </el-table-column>
          <el-table-column  width="200" label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="操作" width="250">
            <template #default="{row}">
                  <el-link  :icon="Edit" @click="toSendEdit(row.userId)" type="primary">修改 </el-link>  
                  <el-link style="margin: 0 10px;" :icon="Delete" type="primary" @click="toDel(row.userId)">删除 </el-link>   
                 
                  <el-dropdown>
                        <el-link style="margin-top: 5px;" :icon="DArrowRight" type="primary">更多 </el-link>  

                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item>
                                 <el-link @click="toOpen(row.userId,row.userName)" :icon="Delete" type="primary">重置密码 </el-link>  
                              </el-dropdown-item>
                               <el-dropdown-item>
                                 <el-link @click="turnRole(row.userId,row.nickName,row.userName)" :icon="Delete" type="primary">分配角色 </el-link>  
                              </el-dropdown-item>
                            </el-dropdown-menu>
                         
                           
                          </template> 
                  </el-dropdown>
            </template>
          </el-table-column>
      </el-table>
     
     </div>
     <div style="display: flex; justify-content: flex-end; margin-right: 50px;">
       <el-pagination :page-sizes="[10, 20, 30]" background :total="total" layout="total,sizes,prev,pager,next,jumper"></el-pagination>
     </div>
     <!-- 添加弹出层 -->
    <addUser ref="addFormRef" @updateList="getList"></addUser>

    <!-- 下载模版 和导入 excel用户的弹出层 -->
     <el-dialog title="导入用户" v-model="upFlag" width="40%">
          <el-upload
              class="upload-demo"
              drag
              :auto-upload="false"
              action="#"
              :on-change="getFile"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
               将文件拖拽到此处 <em>点击上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip" style="text-align: center;">
                    是否更新已经存在的用户数据
                  仅允许导入xls、xlsx格式文件。
                  <el-link type="primary" @click="toDownLoad">下载模板</el-link>
                </div>
              </template>
            </el-upload>
            <template #footer>
              <el-button type="primary" @click="toUpLoad">确定</el-button>
                <el-button @click="upFlag=false">取消</el-button>
            </template>
     </el-dialog>
     <!-- 重置密码弹出层 -->
      <el-dialog title="重置密码" v-model="passFlag" width="50%">
        <el-form >
          <el-form-item :label="'请输入'+userName+'用户新密码'">
            <el-input v-model="password"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <div>
             <el-button type="primary" @click="toUpdatePass">确定</el-button>
             <el-button @click="passFlag=false">取消</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>
<script setup>
  import {ref,reactive} from 'vue'
  import {Search,Refresh,Plus,Edit,Delete,Upload,Download,DArrowRight} from '@element-plus/icons-vue'
  import {listUser,importTemplate,importDataUser,delUser,resetUserPwd} from '@/api/system/user'
  import addUser from './addUser.vue'
  import { ElMessage ,ElMessageBox} from 'element-plus'
 import {useRouter} from 'vue-router'
  // FileSaver 将文件流 保存成文件的插件
  import FileSaver from 'file-saver'
  // 导入excel 插件 xlsx
  import * as XLSX from 'xlsx'
  import mitt from '@/utils/mitt'
  let router=useRouter();
  let datetime=ref('')
  let upFlag=ref(false)//上传excel的弹出层
  let queryForm=reactive({
    deptId:"",//部门查询
    pageNum:1,
    userName:"", //用户名查询
    phonenumber:"",//手机号查询
    status:"",//状态查询
    params:{ //创建日期查询
      beginTime:"",
      endTime:""
    }
  })
  
  let userList=ref([])//用户列表
  let total=ref(0)//总条数
  //监听点击部门树形  传来了部门id
  mitt.on("sendDeptId",(id)=>{
    queryForm.deptId=id //接受兄弟组件传来的部门id
    getList();//部门id改变 重新掉列表
  })
// 搜索 
let toSearch=()=>{
  console.log(queryForm,"搜索")
  console.log(datetime.value,"日期")
  queryForm.params["beginTime"]=datetime.value[0] //开始时间
  queryForm.params["endTime"]=datetime.value[1] //结束时间
    getList();
}

  // 获取用户列表
  let getList=async ()=>{
    let res=await listUser(queryForm);
    console.log(res,"用户列表")
    userList.value=res.rows;
    total.value=res.total;
  }
  getList();
  // 获取子组件的ref
  let addFormRef=ref()
  let open=()=>{
    addFormRef.value.userFlag=true; //控制子组件的数据打开弹出层
  }

  // 点击编辑 调用子组件的 toEdit方法 并传id
  let toSendEdit=(id)=>{
    addFormRef.value.toEdit(id)
  }
  // 点击下载用户模版
  let toDownLoad=async ()=>{
    let res=await importTemplate();
    console.log(res,"下载模版")
    FileSaver.saveAs(res,"用户上传模版.xlsx")
  }
  // 文件上传框选择文件change事件
  // 上传文件 和后端交互的数据是formdata类型的数据
  let formdata=new FormData()
  let getFile=(file)=>{
    // elementui 文件选择 file.raw 获取文件对象
    // 原生js e.target.files[0] 获取文件对象
    //  formdata.append(随机key,文件对象)
    console.log(file,"文件对象")
    if(file.size>50*1024*1024){ //限制文件大小
        ElMessage.error("文件大小不能超过5M")
      return 
    }
    
    formdata.append("file",file.raw)
  }


  // 调用上传接口
  let toUpLoad=async ()=>{
    let res=await importDataUser(formdata)
    console.log(res,"上传文件")
    ElMessage.success("上传文件成功")
    formdata=new FormData()//清空formdata
    upFlag.value=false; //关闭弹出层
    getList() //重新获取用户列表
  }
  // 删除用户接口、

 let toDel= (userId)=>{
  ElMessageBox.confirm("你确定删除id是"+userId+"的用户吗？","提示",{
    confirmButtonText:"确定",
    cancelButtonText:"取消",
    type:"warning"
  }).then(async ()=>{
    console.log("确定删除")
     let res=await delUser(userId) //删除接口
    console.log(res,"删除用户")
    ElMessage.success("删除成功")
    getList() //重新获取用户列表
  })
   
 }
//使用xlsx 插件完成  导出成excel 
let toExport=()=>{
    // 创建一个表
    let sheet=XLSX.utils.json_to_sheet(userList.value) //参数是当前表格的数据
    // 创建一个工作簿
    let book=XLSX.utils.book_new()
    // 将表添加到工作簿中
    XLSX.utils.book_append_sheet(book,sheet,"用户列表")
    // 将工作簿生成excel文件
    XLSX.writeFile(book,"用户列表.xlsx")
}

// 重置密码
let passFlag=ref(false)
let password=ref('') //输入的新密码
let passUserId=ref('') //正在修改密码的用户id
let userName=ref('') //正在修改密码的用户名
let toOpen=(userId,name)=>{ //点击重置密码 打开弹出层存储用户id
    passFlag.value=true;
    passUserId.value=userId//存储用户id
    userName.value=name //存储用户名
}
let toUpdatePass=async ()=>{ //重置密码
  let res=await resetUserPwd(passUserId.value,password.value)
  console.log(res,"重置密码")
  passUserId.value=''//清空修改的用户id
  password.value=''//清空输入的新密码
  getList()
}

// 跳转到 分配角色页面 并传 用户id 用户昵称 用户名
let turnRole=(userId,nickName,userName)=>{
    router.push({
      name:"AuthRole",
      params:{
        userId:userId, //用户id
      },
      query:{
        nickName:nickName, //用户昵称
        userName:userName //用户名
      }
    })
}
</script>
<style lang="scss" scoped>
    .search_wrap{
      margin: 20px auto;
    }
</style>